<template>
    <div class=" white-module">
      <div class="troops">
        <img src="@/assets/title_bg.png"/>
        <div class="c"><span>参赛代表队</span> {{userInfo ? userInfo.team.teamName : ''}} <span>领队</span> {{userInfo ? userInfo.leader.realName:''}}</div>
      </div>

      <el-row class="search-module">
        <el-col class="search-left" :span="21">
          <div class="item">
            <span class="text">选手：</span>
            <el-input v-model="dataForm.realName"></el-input>
          </div>
        </el-col>

        <el-col class="right-btn" :span="3">
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-col>
      </el-row>

      <div class="scholl-tabs">
        <div class="item" active>已注册参赛选手</div>
      </div>

      <div class="global-table">
        <el-table
          :data="dataList"
          :header-cell-style="{
              background: '#F5F7FA',
              color: '#333',
          }"
          style="width: 100%"
        >
          <el-table-column prop="real_name" label="姓名" >
            <template #default="scope">
              <span class="table-text-btn" type="text" @click="toDetail(scope.row.id)" size="small"> {{scope.row.real_name}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="参赛单位" />
          <el-table-column prop="create_date" label="注册时间" />
          <el-table-column prop="student" label="参赛记录" >
             <template #default="scope">
              <span class="table-text-btn" type="text" @click="handleQuery(scope.row.id,scope.row.real_name)" size="small"> 查看 </span>
            </template>
          </el-table-column>
          <el-table-column prop="student" label="获奖证书" >
            <template #default="scope">
              <span class="table-text-btn" type="text" @click="toCertificateList(scope.row.real_name, scope.row.id_card)" size="small"> 查看 </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <!--<span  class="table-text-btn" type="text" size="small"> 修改信息 </span>-->
              <span v-if="scope.row.status==1" class="table-text-btn" type="text" @click="showUnbindConfirm(scope.row)" size="small"> 申请解绑中 </span>
              <span v-else class="table-text-btn" type="text" @click="handleDelete(scope.row.id, scope.row.teamUserId)" size="small"> 解除绑定 </span>
              <el-icon v-if="scope.row.status==1" @click="showUnbindConfirm(scope.row)" style="color: #F56C6C;vertical-align: middle;" size="20px"><Warning /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row class="global-pagination">
        <el-col :span="8" class="total"> 共搜索 {{total}} 条数据 </el-col>
        <el-col :span="16">
          <el-pagination
              background
              layout="  prev, pager, next, jumper"
              :total="total"
              :page-size="10"
              :current-page="page"
              :small="false"
              :disabled="false"
              @size-change="query"
              @current-change="pageCurrentChangeHandle"
          />
        </el-col>
      </el-row>

    </div>
    <el-dialog
    v-model="dialogVisible" :show-close="false"
    width="400px">
    <div class="confirm-dialog">
         <div class="image"><img src="@/assets/common/hint_red.png"/></div>
         <div class="text">是否确认解除绑定？</div>
         <div class="btns">
            <el-button type="primary" @click="handleConfirm">确认</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
         </div>
    </div>
  </el-dialog>

  <!--解绑提示-->
  <el-dialog
      v-model="unbindDialogVisible" :show-close="true"
      width="400px">
    <div class="confirm-dialog">
      <div class="image"><img src="@/assets/common/hint_red.png"/></div>
      <div class="text">该选手申请解绑，请确认操作</div>
      <div class="btns">
        <el-button type="primary" @click="agreeUnbind">同意解绑</el-button>
        <el-button @click="rejectUnbind">拒绝解绑</el-button>
      </div>
    </div>
  </el-dialog>

  </template>

<script lang="ts" >
import {ref,toRefs, reactive, defineComponent} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache, setCache} from "@/utils/cache";

export default defineComponent({
  setup() {
    const state = reactive({
      getDataListURL: "/front/fast/user/userList/page?pageSize=10&type=4",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        id: null,
        userId: null,
        status: "",
        name: "",
        realName: ""
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {
      isCollapse:1,
      dialogVisible:false,
      unbindDialogVisible: false,
      currentUnbindRequest: null as any,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
      userInfo: null as any
    };
  },

  mounted() {
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
    this.getTeamInfo();
  },

  methods: {
    handleCollapse() {

    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    handleQuery(userId: any, realName: any) {
      router.push("/contestList?userId=" + userId + "&userName=" + realName);
    },
    toCertificateList(realName: any, idCard: any) {
      const certificate = {
        realName: realName,
        idCard: idCard
      };
      setCache("certificate", certificate, true);
      let routeData = router.resolve("/cerList");
      window.open(routeData.href, '_blank');
    },
    toDetail(id: any) {
      router.push({path: "/info", query: {id: id}});
    },


    /**
     * 解除绑定
     */
    handleDelete(userId: any, id: any) {
      this.dialogVisible = true;
      this.dataForm.id = id;
      this.dataForm.userId = userId;
    },

    /**
     * 确定解除绑定
     */
    handleConfirm() {
      baseService
          .post("/front/spteamuser/delete", {userId: this.dataForm.userId, id: this.dataForm.id})
          .then((res) => {
                if (res.code === 0) {
                  this.query();
                  ElMessage.success('解除绑定成功');
                } else {
                  ElMessage.error(res.msg);
                }
                this.dialogVisible = false;
              }
          );
    },


    /**
     * 查询代表队信息
     */
    getTeamInfo() {
      baseService
          .get("/front/spteam/1", {})
          .then((res) => {
                if (res.code === 0) {
                  let info = res.data;
                  if (info) {
                    setCache("userInfo", info, true);
                  } else {
                    //创建领队
                    router.push("/account/team");
                  }
                }
              }
          );
    },
    reset: function () {
      if (this.dataForm) {

      }
    },

    /**
     * 显示解绑确认对话框
     */
    showUnbindConfirm(row: any) {
      this.currentUnbindRequest = row;
      this.unbindDialogVisible = true;
    },

    /**
     * 同意解绑
     */
    agreeUnbind() {
      this.dataForm.id = this.currentUnbindRequest.teamUserId;
      this.dataForm.userId = this.currentUnbindRequest.id;
      this.handleConfirm();
      this.unbindDialogVisible = false;
    },

    /**
     * 拒绝解绑
     */
    rejectUnbind() {
      baseService
          .post("/front/spteamuser/rejectUnbind", {userId: this.currentUnbindRequest.id, teamId: this.userInfo.team.id})
          .then((res) => {
            if (res.code === 0) {
              ElMessage.success("拒绝解绑");
            } else {
              ElMessage.error(res.msg);
            }
            //刷新数据
            this.query();
            //关闭弹窗
            this.unbindDialogVisible = false;
          });
    }



  }
});
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.white-module{
padding-top: 20px;
}
.troops {
  position: relative;    margin: 0px 0px 25px 24px;
  img{
    width: 579px;
  }
    .c{
      position: absolute;
      left: 0px;
      top:0px;
      width: 532px;
    line-height: 54px;
    border-radius: 6px;


    span {
        font-size: 16px;
        font-weight: $font-weight-bold;
        margin-left: 24px;
        margin-right: 10px
    }

    ;

    span:nth-child(2) {
        margin-left: 34px;
    }
    }
}

.search-module {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px 0px 20px;
    margin-top: 10px;

    .interval {
        padding: 0px 15px;
    }

    .search-left {
        color: #333333;
        text-align: left;
    }

    .right-btn {
        text-align: right;
    }
}

.global-table {
    margin-top: 15px;
    padding: 0px 20px;
}

.popper-menu {
    border: 0px !important;

    .el-menu {
        padding: 0px !important;
        background-color: #008fd1 !important;

        .el-menu-item-group__title {
            padding: 0px;
        }

        .el-menu-item:hover {
            background-color: #ffffff !important;
            color: #00a0e9;
        }

        .el-menu-item.is-active {
            background-color: #ffffff !important;
        }
    }
}</style>
